<script setup>
import {onMounted, ref} from "vue";
import {getFrontendArticleList} from "@/api/article.js";
import ArticleListItem from "@/components/post/ArticleListItem.vue";
import VPage from "@/components/page/VPage.vue";
import {useRouter} from "vue-router";
import LeftAuthorInfo from "@/components/post/LeftAuthorInfo.vue";

const $router = useRouter();

onMounted(() => {
  getPostList();
});

const postList = ref([]);
const loading = ref({
  newArticle: false,
  postList: false
});

// 获取文章列表
const getPostList = async () => {
  const request = {
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize
  };
  loading.value.postList = true;
  await getFrontendArticleList(request).then(res => {
    // console.log(res);
    postList.value = res.data?.record;
    pagination.value.total = res.data?.total;
    pagination.value.pages = res.data?.pages;
    loading.value.postList = false;
  }).catch((err) => {
    console.log(err);
    loading.value.postList = false;
  });
};


const pagination = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  pages: 0
});

const readArticle = (data) => {
  // console.log(data);
  if (!data?.id) return;
  $router.push({path: `/article/read/${data?.id}`});
};
</script>

<template>
  <div class="v-post-box">
    <div class="v-post-left">
      <left-author-info/>
    </div>
    <div class="v-post-right" v-loading="loading.postList">
      <article-list-item @lookup="readArticle" :article="item" v-for="item in postList" :key="item.id"/>
      <v-page v-model="pagination" @query="getPostList"/>
    </div>
  </div>
</template>

<style scoped>
.v-post-box {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  
  .v-post-left {
  }
}
</style>